import React from 'react'
import {
  Home, 
  BarChart3, 
  Settings, 
  Bot, 
  Sparkles,
  Menu,
  X
} from 'lucide-react'
import { useLanguage } from '../contexts/LanguageContext'
import { t } from '../i18n/translations'
import { ThemeToggle } from './ThemeToggle'

interface NavigationProps {
  currentPath: string
}

const navigationItems = [
  { 
    href: '/', 
    icon: Home, 
    label: 'home' 
  },
  { 
    href: '/traders', 
    icon: BarChart3, 
    label: 'traders' 
  },
  { 
    href: '/ai-traders', 
    icon: Sparkles, 
    label: 'aiTraders' 
  },
  { 
    href: '/settings', 
    icon: Settings, 
    label: 'settings' 
  },
]

export function Navigation({ currentPath }: NavigationProps) {
  const { language } = useLanguage()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false)

  return (
    <>
      {/* Desktop Navigation */}
      <nav className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:w-20 lg:flex-col lg:bg-panel-bg lg:border-r lg:border-panel-border">
        <div className="flex flex-col items-center py-6 space-y-6 flex-1">
          {/* Logo */}
          <div className="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-primary-500 to-purple-500 rounded-xl shadow-lg">
            <Bot className="w-6 h-6 text-white" />
          </div>

          {/* Navigation Items */}
          <div className="flex flex-col items-center space-y-4 flex-1">
            {navigationItems.map((item) => {
              const Icon = item.icon
              const isActive = currentPath === item.href
              
              return (
                <a
                  key={item.href}
                  href={item.href}
                  className={`p-3 rounded-xl transition-all duration-200 group relative ${
                    isActive
                      ? 'bg-primary-500/20 text-primary-500 shadow-lg shadow-primary-500/20'
                      : 'text-text-secondary hover:text-primary-500 hover:bg-primary-500/10'
                  }`}
                >
                  <Icon className="w-6 h-6" />
                  
                  {/* Tooltip */}
                  <div className="absolute left-16 p-2 px-3 bg-black/90 text-white text-sm rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none whitespace-nowrap z-50">
                    {t(item.label, language)}
                    <div className="absolute top-full left-2 transform -translate-x-1/2 w-2 h-2 bg-black/90 rotate-45"></div>
                  </div>
                </a>
              )
            })}
          </div>

          {/* Bottom Actions */}
          <div className="flex flex-col items-center space-y-4">
            <ThemeToggle />
          </div>
        </div>
      </nav>

      {/* Mobile Header */}
      <header className="lg:hidden fixed top-0 left-0 right-0 z-50 bg-panel-bg border-b border-panel-border">
        <div className="flex items-center justify-between px-4 py-4">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-purple-500 flex items-center justify-center">
              <Bot className="w-4 h-4 text-white" />
            </div>
            <h1 className="text-lg font-bold text-text-primary">NOFX</h1>
          </div>
          
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="p-2 rounded-lg text-text-secondary hover:text-primary-500 hover:bg-primary-500/10 transition-colors"
            >
              {isMobileMenuOpen ? (
                <X className="w-5 h-5" />
              ) : (
                <Menu className="w-5 h-5" />
              )}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="absolute top-full left-0 right-0 bg-panel-bg border-b border-panel-border shadow-xl">
            <div className="py-4 space-y-1">
              {navigationItems.map((item) => {
                const Icon = item.icon
                const isActive = currentPath === item.href
                
                return (
                  <a
                    key={item.href}
                    href={item.href}
                    onClick={() => setIsMobileMenuOpen(false)}
                    className={`flex items-center gap-3 px-4 py-3 text-text-secondary hover:text-primary-500 hover:bg-primary-500/10 transition-colors ${
                      isActive ? 'text-primary-500 bg-primary-500/20' : ''
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span>{t(item.label, language)}</span>
                  </a>
                )
              })}
            </div>
          </div>
        )}
      </header>

      {/* Mobile Spacer */}
      <div className="lg:hidden h-16"></div>
    </>
  )
}